/*---------------------------------------------------------------------------------------------
 *  Copyright (c) kylinIDETeam. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

 html,
 body {
	 margin: 0;
	 padding: 0;
	 height: 100%;
	 font-family: "Segoe UI", "Helvetica Neue", "Helvetica", Arial, sans-serif;
	 overflow: hidden;
	 box-sizing: border-box;
 }

 :focus-visible {
	 outline: none;
	 border: solid 1px #ff9c00;
	 border-radius: 2px;
 }

 .container {
	 width: 100%;
	 height: 100%;
	 /* 很重要,不然flex不生效 */
	 display: flex;
	 flex-direction: column;
	 color: #333333;
	 flex: 1;
 }

 .overlay {
	 position: fixed;
	 /* top: 0;
	 left: 0; */
	 width: 100%;
	 height: 100%;
	 background: rgba(0, 0, 0, 0.5); /* 半透明黑色背景 */
	 display: flex;
	 justify-content: center;
	 align-items: center;
	 z-index: 9999; /* 确保蒙版在最前面 */
   }
   .preparing-container {
	 display: flex;
	 margin-top:-200px ;
	 text-align: center;
	 color: #fff;
	 align-items: center;
	 justify-content: center;
	 height: 100vh;
	 flex-direction: column;
   }
 .wait-container{
	 display: block;
	 text-align: center;
	 width: 100%;
	 margin-top: 100px;
 }

 .header {
	 cursor: move;
	 height: 45px;
	 border-bottom: 1px solid #fff;
	 box-sizing: border-box;
	 padding: 5px 2px 9px;
	 -webkit-app-region: drag;
	 background-color: #f2f2f2;
	 position:absolute;
	 width:100%;
	 top:0px;
 }
 #first ,#osInfoShow{
	 flex-direction: column;
 }
 .bodycontent {
  display: flex;
  width: 100%;
  height: 100%;
  flex:1;
  top:45px;
  bottom: 65px;
  position: absolute;
 }
 .content{
	 width: 100%;
	 height: 100%;
	 display: flex;
	 flex-direction: column;
	  top:0px;
	  bottom: 0px;
	 position: absolute;
 }


 .dark .header {
	 color: #c6c6c6;
	 background-color: #3C3C3C;
 }

 .title {
	 float: left;
	 text-align: center;
	 margin: 5px;
 }


 .close {
	 width: 25px;
	 height: 25px;
	 float: right;
	 -webkit-app-region: no-drag;
	 cursor: pointer;
	 margin: 5px;
	 text-align: center;
	 opacity:0.5;
	 background: url(../images/close_gray.png) no-repeat;
 }
 .close:hover{
	 opacity:1;
	 transform: scale(1.2);
 }

 .dark .close {
	 background: url(../images/close.png);
 }

 /*页面中间区域 start {*/

 .center {
	 flex: 1;
	 padding: 10px;
	 overflow: auto;
	 color: #333333;
	 background-color: #F2F2F2;
	 position: relative;
	 padding-left: 25px;
 }

 .dark .center {
	 color: #c6c6c6;
	 background-color: #3C3C3C;
 }

 /* 默认隐藏所有步骤： */
 .tab {
	 display: none;
	 flex-direction: column;
	 align-items: flex-start;
 }

 /* 默认隐藏所有步骤： */
 .downloadtab {
	 display: none;
	 flex-direction: column;
	 align-items: flex-start;
 }
 .localinstalltab{
	 display: none;
	 flex-direction: column;
	 align-items: flex-start;
 }

 .devContent {
	 display: flex;
	 flex-direction: row;
 }
 .devContentCol{
	 display: flex;
	 flex-direction: column;
 }


 /* 用圆圈表示表格的步骤： */
 .indicator {
	 position: absolute;
	 bottom: 65px;
	 text-align: center;
	 left: 50%;
	 transform: translate(-50%);
 }

 .step {
	 height: 15px;
	 width: 15px;
	 margin: 0 2px;
	 background-color: #bbbbbb;
	 border: none;
	 border-radius: 50%;
	 display: inline-block;
	 opacity: 0.5;

 }

 .step.active {
	 opacity: 1;
	 background-color: #1177BB;
 }

 /*页面中间区域 end}*/

 /*以下为footer区域*/
 .footer {
	 height: 60px;
	 line-height: 60px;
	 border-top: solid 1px #fff;
	 background-color: #f2f2f2;
	 position:absolute;
	 bottom:0px;
	 width:100%;
 }

 .dark .footer {
	 border-top: solid 1px #cccccc;
	 background-color: #3C3C3C;
 }

 .btn-group {
	 margin-left: 10px;
	 margin-right: 10px;
 }

 .btn-group button {
	 background-color: #1177BB;
	 /* 蓝色背景 */
	 border: 1px solid #0e5483;
	 /* 蓝色边框 */
	 color: white;
	 /* 白色文本 */
	 /* padding: 8px 18px; */
	 /* 一些填充 */
	 cursor: pointer;
	 /* 指针/手形图标 */
	 /* width: 55px; */
 }
  .dark .btn-group button {
	 background-color: #0E639C;
	 /* 蓝色背景 */
 }

 /* 清除浮动（clearfix hack）*/
  .btn-group:after {
	 content: "";
	 clear: both;
	 display: table;
 }

 .btn-group button:not(:last-child) {
	 border-right: none;
	 /* 防止双边框 */
 }

 /* 悬停时添加背景色 */
  .btn-group button:hover {
	 background-color: #0E639C;
 }

  .dark .btn-group button:hover {
	 background-color: #1177BB;
 }


 .scenarioSelection {
	 font-size: h4; /* 调整字体大小为h3 */
	 /* font-weight: bold; 可选：设置字体加粗 */
 }

 h3{
	 font-size: 16px;
	 font-weight: bold;
	 margin-top:0px ;
	 margin-bottom: 0px;
 }

 .depOutputTextbox input[type="text"],
 .depOutputTextbox #outputPre {
	 height: 330px ;
	 overflow:auto;
	 width: 600px;
	 margin-left: 40px;
	 background-color: transparent;
	 border-width: 1px solid black;
 }

 #depOutDesc {
	 margin-top: -30px;
	 width: 600px;
 }

 .depOutputTextbox {
	 margin-left: 20px;
 }

 .installSelection,
 .updateInstallConfig,
 .installInfoConfig {
	 font-size: 18px;
	 line-height: 2.0;
 }

 .installInfo1 {
	 height: auto;
 }
 #checkboxForm {
	 width: 180px;
 }
 .formSeparator {
	 border-left: 1px solid;
	 /* 设置竖线样式 */
	 height: 360px;
	 /* 设置竖线高度，可以根据需要调整 */
	 margin-left: 10px;
	 /* 设置与form之间的间距，可以根据需要调整 */
 }

 input[readonly] {
	 background-color: rgba(255, 255, 255, 0.5);
	 width: 400px;
 }

 .progress-container {
	 display: flex;
	 align-items: center;
	 margin: -8px;
 }

 .progress-download,
 .progress-install,
 .pkg-progress-install,
 .progressinfo
 {
	 position: absolute; /* 添加绝对定位 */
	 margin-left: 18%;
	 color: #000000;
 }

 .download-view,
 .install-view,
 .pkg-install-view,
 .progress-view
 {
	 flex: 1;
	 height: 50px;
	 position: relative;
	 width: 800px;
	 margin-left: 8%;
 }

 .grey-progress-view {
	 flex: 1;
	 height: 26px;
	 position: relative;
	 width: 800px;
	 margin-left: 8%;
	 margin-top:10px;
	 margin-bottom: 8px;
	 border-radius: 30px;
	 background-color: grey;
	 border: 1px solid grey;
 }

 .detailInstallOutputTextbox{
	 margin-left: 8%;
	 font-weight: bold;
	 margin-top: 5px;
 }

 #detailInstallPre,
 #installLogPre,
 #extInstallLogPre,
 #finishPage
 {
	 height: 300px;
	 width: 700px;
	 flex: 1;
	 position: relative;
	 overflow-y: auto;
 }

 .dark{
	 color: #c6c6c6;
	 background-color: #3C3C3C;
 }

   pre .downloadHighlight::before {
	 content: "\2713"; /* Unicode对号字符 */
	 color: yellow;
	 margin-right: 5px;
   }

   pre .startHighlight::before {
	 content: "\25CF"; /* Unicode实心圆圈字符 */
	 color: gray;
	 margin-right: 5px;
   }

   pre .installedHighlight::before {
	 content: "\2713"; /* Unicode对号字符 */
	 color: green;
	 margin-right: 5px;
   }

   pre .depInstalledHighlight::before {
	 content: "\2713"; /* Unicode对号字符 */
	 color: green;
	 margin-right: 5px;
   }

   pre .depfailHighlight::before {
	 content: "\2717";
	 color: red;
	 margin-right: 5px;
   }

   .switchInstallOutput {
	 position: absolute;
   }
   .center div p {
	   margin-bottom: 0;
	   margin-top: 0;
	 font-size: 14px;
   }

   /* .graybt {
	 background-color:gray;
	 cursor:not-allowed;
   }

   button:disabled{
	 background-color:yellow;
   }
   .button.is-disabled, .button.is-disabled:focus, .button.is-disabled:hover{
	 background-color: gray;
	 border-color: transparent;
 } */

 button#prevStep:disabled ,
 button#nextStep:disabled,
 button#cancel:disabled
 {
	 background-color: gray;
	 border-color: gray;
	 opacity: 0.5;
 }

 .checkbox {
	 -webkit-appearance:none;
	 -moz-appearance:none;

	 outline:none;
	 width:14px;
	 height:14px;
	 background:#fff;
	 vertical-align:middle;
 }
 .checkbox:checked{
	 background:#1177BB;
 }

 .checkbox:checked::after{
	 content:"";
	 height:5px;
	 width:8px;
	 border:#fff solid 2px;
	 position:absolute;
	 margin-top:2px;
	 margin-left:2px;
	 border-top:none;
	 border-right:none;
	 transform:rotate(-45deg);
 }

 .checkbox:disabled{
	 background: rgba(255, 255, 255, 0.5);
 }

 .checkboxselect {
	 -webkit-appearance:none;
	 -moz-appearance:none;

	 outline:none;
	 width:14px;
	 height:14px;
	 background:#1177BB;
	 vertical-align:middle;
 }
 .checkboxselect:checked{
	 background:#1177BB;
 }

 .checkboxselect:checked::after{
	 content:"";
	 height:5px;
	 width:8px;
	 border:#fff solid 2px;
	 position:absolute;
	 margin-top:2px;
	 margin-left:2px;
	 border-top:none;
	 border-right:none;
	 transform:rotate(-45deg);
 }
 .checkboxselect:disabled{
	 background: rgba(255, 255, 255, 0.5);
 }
